import React,{useState , useRef} from 'react'
import { Form, Input, Button, Checkbox ,DatePicker ,InputNumber ,Modal ,Select , message } from 'antd';
import moment from 'moment';
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
import ReactToPrint from "react-to-print";
import request from '@/utils/request';
import styles from '../index.less'
const { Option } = Select;
const openInvoice = (props) => {
    const [isModalVisible,setIsModalVisible] = useState(false)
    const [formValue,setFormValue] = useState()
    const [form]  = Form.useForm()
    let domRef = useRef()

    const onFinish = (values) =>{
        const value = {...values}
        value.startDate = moment(value.startDate).format('YYYY-MM-DD')
        setFormValue(value)
        setIsModalVisible(true)
    }

    const handleSubmit = async() =>{
        const res = await request('/api/invoice/',{
            method:'post',
            data:formValue
        })
        if(res.status == 422){
            
            message.warning('该发票号码已存在，将不再重新入库',10)
        }
    }
    return (
        <div style={{width:'700px',margin:'100px auto'}}>
            <h1 style={{textAlign
            :'center',fontSize:"32px",fontWeight:'bold',marginBottom:'30px'}}>发票回执开具</h1>
            <Form
                name="basic"
                form={form}
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 16 }}
                initialValues={{
                    openInvoiceCom:'昆明喜田科技有限公司',
                    invoiceType:'增值税专用发票',
                    startDate:moment(new Date(),'YYYY/MM/DD')
                }}
                onFinish={onFinish}
            >
                <Form.Item
                    label="收票单位"
                    name="invoiceCom"
                    rules={[{ required: true, message: '请输入收票单位全称' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="发票号码"
                    name="invoiceNum"
                    rules={[{ required: true, message: '请填写发票号码' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="发票类型"
                    name="invoiceType"
                    rules={[{ required: true, message: '请选择发票类型' }]}
                >
                    <Select  style={{ width: '100%' }}>
                        <Option value="增值税专用发票">增值税专用发票</Option>
                        <Option value="增值税普通发票">增值税普通发票</Option>
                    </Select>
                </Form.Item>
                <Form.Item
                    label="发票金额"
                    name="invoicePrice"
                    rules={[{ required: true, message: '请输入正确发票金额' }]}
                >
                    <InputNumber min={0} style={{width:"100px"}} 
                    precision="2"  
                    formatter={value => `￥ ${value}`}
                    defaultValue={0.00}  />
                </Form.Item>
                <Form.Item
                    label="开票日期"
                    name="startDate"
                    rules={[{ required: true, message: '请输入正确发票日期' }]}
                >
                    <DatePicker locale={locale} style={{width:'100%'}} />
                </Form.Item>
                <Form.Item
                    label="开票单位"
                    name="openInvoiceCom"
                    rules={[{ required: true, message: '请输入开票单位全称' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 10, span: 4 }}>
                    <Button type="primary" htmlType="submit">
                        预览并打印
                    </Button>
                </Form.Item>
            </Form>
            <Modal  width={800} visible={isModalVisible} 
                footer={<ReactToPrint
                trigger={() => <Button type='primary' >打印并提交</Button>}
                content={() => domRef}
                onBeforePrint={handleSubmit}
                onAfterPrint={()=>{
                    setIsModalVisible(false)
                    form.resetFields()
                    setFormValue()
                }
                } // 打印后触发的回调功能，关闭弹窗
                />}
                 onCancel={()=>setIsModalVisible(false)}>
                    <div ref={el => (domRef = el)} className={styles.main}>
                        <h1 className={styles.title}>发票签收回执单</h1>
                        <div className={styles.box}>
                            <div className={styles.top}>
                                <div>
                                    <span>收票单位：{formValue?.invoiceCom}</span>
                                </div>
                                <div>
                                    <span>
                                        发票类型：{formValue?.invoiceType}
                                    </span>
                                    <span>
                                        发票号码：{formValue?.invoiceNum}
                                    </span>
                                </div>
                                <div>
                                    <span>
                                        开票日期：{formValue?.startDate}
                                    </span>
                                    <span>
                                        发票金额：{parseFloat(formValue?.invoicePrice).toFixed(2)}&nbsp;&nbsp;&nbsp;元
                                    </span>
                                </div>
                                <div>
                                <span>
                                        开票单位：昆明喜田科技有限公司
                                    </span>
                                    <span>
                                        联系电话：0871-65333518
                                    </span>
                                </div>           
                            </div>
                            <div className={styles.center}>
                                扫描下方二维码 -> 输入发票号码 -> 核对内容 -> 签字并拍照上传 -> 提交
                            </div>
                            <div className={styles.bottom}>
                                <img src={require('@/assets/qr.jpg')} width={200} height={200}/>
                                <div>
                                    <div>
                                        送达方式： 顺丰快递
                                    </div>
                                    <div>
                                        收票单位:(签字)
                                    </div>
                                    <div>
                                        经手人:(签字)
                                    </div>
                                    <div>
                                        收票日期： <span>年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </Modal>
        </div>
    )
}
export default openInvoice